<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/css.css" />
</head>

<body>
	<div class="container">
		<div class="left">
			<div class="txt_reg1">新用户注册</div>
			<div class="txt_reg2">USER REGISTER</div>
		</div>
		<form action="" method="" id="myform">
			<div class="center">
				<span class="ospan">用户名</span>
				<input type="text" id="uname" class="in" />
				<span id="suname" class="tis"></span>
				<br />
				<span class="ospan">密码</span>
				<input type="text" id="pwd" class="in" />
				<span id="spwd" class="tis"></span>
				<br />
				<span class="ospan">Email</span>
				<input type="text" id="email" class="in" />
				<span id="semail" class="tis"></span>
				<br />
				<span class="ospan">姓名</span>
				<input type="text" id="xm" class="in" />
				<span id="sxm" class="tis"></span>
				<br />
				<span class="ospan">手机号</span>
				<input type="text" id="tel" class="in" />
				<span id="stel" class="tis"></span>
				<br />
				<span class="ospan">性别</span>
				<input type="radio" name="s" id="sex" />男
				<input type="radio" name="s" id="sex" />女
				<br />
				<span class="ospan">出生日期</span>
				<input type="date" id="odate" />
				<br />
				<span class="ospan">验证码</span>
				<span class="yan" id="yan"></span>
				<span class="ch" id="ch">看不清楚，换一张</span>
				<br />
				<input type="text" name="" id="yantxt" value="" class="yanz" placeholder="请输入验证码" />
				<input type="button" value="验证" class="btn" id="btn" />
				<br />
				<input type="submit" name="" id="" value="注册" class="obtn" />
			</div>
		</form>
		<div class="right">
			<span>已有账号?</span><a href="#">立即登录</a>
		</div>
	</div>
	<div class="container">
		<div id="" class="bottom-left">
			<p class="txt_reg1">CSS属性转换JavaScript属性</p>
			<p>请输入CSS属性：</p><input type="text" class="in" id="text0" />
			<input type="submit" value="转换" class="btn" id="trans">
		</div>
		<div class="bottom-rig" id="div0">
			<p>fontSize</p>
		</div>
	</div>
	<script>
		var a,b,c,d,e,a;
		document.getElementById("uname").onblur = function () {
			if (!/^\w{4,16}$/.test(this.value)) {
				document.getElementById("suname").innerHTML = "用户名格式有误!";
				a=0;
			}
			else {
				document.getElementById("suname").innerHTML = "<img src='right.jpg'>";
				a=1;
			}
		}
		document.getElementById("pwd").onblur = function () {
			if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*?[#?!@$%^&*-.]).{6,}$/.test(this.value)) {
				document.getElementById("spwd").innerHTML = "密码格式有误!";
				b=0;	
			}	
			else {
				document.getElementById("spwd").innerHTML = "<img src='right.jpg'>";
				b=1;
			}
		}
		document.getElementById("email").onblur = function () {
			if (!/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/.test(this.value)) {
				document.getElementById("semail").innerHTML = "邮箱格式有误！";
				c=0;
			}
			else {
				document.getElementById("semail").innerHTML = "<img src='right.jpg'>";
				c=1;
			}
		}
		document.getElementById("xm").onblur = function () {
			if (!/^[\u4e00-\u9fa5]{2,8}$/.test(this.value)) {
				document.getElementById("sxm").innerHTML = "姓名格式有误！";
				d=0;
			}
			else {
				document.getElementById("sxm").innerHTML = "<img src='right.jpg'>";
				d=1;
			}
		}
		document.getElementById("tel").onblur = function () {
			if (!/^\d{11,}$/.test(this.value)) {
				document.getElementById("stel").innerHTML = "手机号格式有误！";
				e=0;
			}
			else {
				document.getElementById("stel").innerHTML = "<img src='right.jpg'>";
				e=1;
			}
		}
		function checkCode() {
			var str = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
			newStr = "";
			for (var i = 0; i < 4; i++) {
				var idx = Math.floor(Math.random() * 62);
				newStr += str[idx];
			}
			document.getElementById("yan").innerHTML = newStr;
			return newStr;
		}
		function chStr() {
			var str = document.getElementById("text0").value;
			var arr = str.split("-");
			var strNew = arr[0];
			for (var i = 1, l = arr.length; i < l; i++) {
				strNew += arr[i].charAt(0).toUpperCase() + arr[i].substring(1);
			}
			document.getElementById("div0").innerHTML = strNew;
			return strNew;
		}
		window.onload = function () {
			document.getElementById("ch").onclick = checkCode;
			checkCode();
			document.getElementById("btn").onclick = function () {
				if (document.getElementById("yantxt").value == newStr) {
					alert("验证成功！！！");
					f=1;
				}
				else {
					alert("验证码错误！！！");
					f=0;
					document.getElementById("yantxt").value = "";
				}
			}
			document.getElementById("myform").onsubmit = function () {
				if (a==1&&b==1&&c==1&&d==1&&e==1&&f==1) {
				alert("注册成功！！！");
					return true;
				}
				else {
					alert("信息未填写完整！！！");
					return false;
				}
			}
			document.getElementById("trans").onclick = chStr;
		}
	</script>
</body>

</html>